<template>
  <div>
    <!-- 引入列表组件 -->
    <Table ref="myTable" :tableTitles="titles" :url="this.utils.myurl.cityList">
      
    </Table>
    <div style="text-align: left; margin: 20px;">
      <Power power="/CityInsert">
        <el-button type="primary" @click="dialogFormVisible = true">新增城市</el-button>
      </Power>
    </div>

    <!-- dialog弹出框的内容 -->
    <el-dialog title="新增城市" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="城市名称" label-width="120px">
          <el-input v-model="form.cityName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="城市拼音" label-width="120px">
          <el-input v-model="form.cityPinyin" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="insertCity()">添 加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Table from './Table.vue'

  export default {
    name: "CityManager",
    components: {Table},
    methods: {
      insertCity(){
        var vt = this;
        this.utils.myajax({
          type: "POST",
          url: this.utils.myurl.cityInsert,
          data: {
            cityName: this.form.cityName,
            cityPinyin: this.form.cityPinyin
          },
          success: function(data){
            vt.$message({
              message: '城市信息添加成功',
              type: 'success'
            });
            vt.dialogFormVisible = false;
            vt.form.cityName = "";
            vt.form.cityPinyin = "";
            //父组件调用子组件的方法
            vt.$refs.myTable.goPage();
          }
        });
      }
    },
    data() {
      return {
        //隐藏dialog
        dialogFormVisible: false,
        form: {
          cityName: "",
          cityPinyin: ""
        },
        titles: [
          {
            prop: 'cid',
            label: 'id',
            width: '100',
            fixed: true
          },{
            prop: 'cityName',
            label: '城市名称',
            width: '200',
            fixed: false
          },{
            prop: 'cityPinyin',
            label: '城市拼音',
            width: '200',
            fixed: false
          },{
            prop: 'createTime',
            label: '创建时间',
            width: '200',
            fixed: false
          },{
            prop: 'updateTime',
            label: '修改时间',
            width: '200',
            fixed: false
          },{
            prop: 'status',
            label: '状态',
            width: '100',
            fixed: false
          }
        ]
      }
    }
  }
</script>

<style>
</style>
